<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DIV、CSS测试</title>
		<link rel="stylesheet" href="../css/test2.css" />
	</head>
	<body>
		<div style="background-color: black;height: 3350px; width: 100%;">
		<div class="all">
		<!--导航栏-->
		<div class="navigation">
			<img  class="img" src="../img/BQ-sucaiw-yctgif-040BQ43CD.gif" />
			<ul>
				<li>导航3</li>
				<li>导航2</li>
				<li>导航1</li>
			</ul>
		</div>
			<!--标题1-->
			<div >
			<h3>文章一级标题</h3>
			<h4 class="gray">文章二级标题</h4>
			<p class="gray">文章作者&nbsp;文章发表时间</p>
			<p>
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落
			<br/>换行了<br/>
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
			<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
			这是一个很长很长很长的段落，
			<b>这里有粗体字</b>
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
			这是一个很长很长很长的段落,这是一个很长很长很长的段落,这是一个很长很长很长的段落，这是一个很长很长很长的段落.
			<br/><img src="../img/键盘.png" alt="图片位置" /><br/>
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
			<br/>换行了<br/>
			很长很长很长的段落，很长很长很长的段落，
			<b>这里有粗体字</b>
			这是一个很长很长很长的段落，
			<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接http://ife.baidu.com</a>
			这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落。
			</p>
			</div>
			<!--标题2-->
			<div >
			<h4>另一篇文章一级标题</h4>
			<h5 class="gray">文章二级标题</h5>
			<p class="gray">文章作者&nbsp;文章发表时间</p>
			<p>
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落
				<br/>换行了<br/>
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				<br/>换行了<br/>
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>
				这是一个很长很长很长的段落，
				<b>这里有粗体字</b>
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落,
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，
				这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落，这是一个很长很长很长的段落。
				<br/><img src="../img/键盘.png" alt="图片位置"><br/>
				<ul style="list-style-type: none;">
					<li>列表项目一</li>
					<li>列表项目二</li>
					<li>列表项目三</li>
				</ul>
		</p>
			</div>
			<!--标题3-->
			<div class="margin">
				<b style="font-size:20px;">图片</b>
				<br/>
				<div style="margin-left: 20px;">
					<div class="img" >
				<img  src="../img/键盘.png" width="160px" height="160px" alt="图片位置"/><br/>
				<div class="desc">好看的图片</div>
					</div>
				</div>
				<div style="margin-left: 20px;">
					<div class="img" >
				<img  src="../img/键盘.png" width="160px" height="160px" alt="图片位置"/><br/>
				<div class="desc">好看的图片</div>
					</div>
				</div>
				<div style="margin-left: 20px;">
					<div class="img" >
				<img  src="../img/键盘.png" width="160px" height="160px" alt="图片位置"/><br/>
				<div class="desc">好看的图片</div>
					</div>
				</div>
				<div style="margin-left: 20px;">
					<div class="img" >
				<img  src="../img/键盘.png" width="160px" height="160px" alt="图片位置"/><br/>
				<div class="desc">好看的图片</div>
					</div>
				</div>
				<div style="margin-left: 20px;">
					<div class="img" >
				<img  src="../img/键盘.png" width="160px" height="160px" alt="图片位置"/><br/>
				<div class="desc">好看的图片</div>
					</div>
				</div>
				<div>
				</div>
			</div>
			<!--标题4-->
			<div >
				<h3>最后一篇文章一级标题</h3>
				<h4 class="gray">文章二级标题</h4>
				<p class="gray">文章作者&nbsp;文章发表时间</p>
				<ol>
					<li>排名1</li>
					<li>排名2</li>
					<li>排名3</li>
				</ol>
				下面是一个表格，给表格加一个border="1"好让你看得出这是一个表格
				<table  >
					<th >表头1</th>
					<th >表头2</th>
					<th >表头3</th>
					<tr>	
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>	
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>	
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>	
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr style="background-color: #BEBEBE;">
						<td class="td" >总计</td>
						<td class="td" colspan="2">1000</td>
					</tr>
				</table>
			</div>
			<!--标题5-->
			
			<div >
				<h3 >这里以后是一个侧栏，这是侧栏的标题</h3>
				<div class="final">
				<p >请输入邮箱地址：<input type="text" value="这是一个文本输入框" name="text" /></p>
				<p class="gray">邮箱地址请按要求格式输入</p>
				<p style="margin-left: 2%;">&nbsp;请输入密码：<input type="password" value="这是一个文本输入框" name="text" /> </p>
				<p >请重复输入密码：<input type="password" value="这是一个文本输入框" name="text" /></p>
				<p class="gray">密码为6-16位英文数字</p>
				</div>
				<p style="margin-left: 40%;">
				性别：
				<input type="radio" name="sex" value="男" checked/>男
				<input type="radio" name="sex" value="nv" checked/>女
				</p>
				<p style="margin-left: 40%;">
				城市：
				<select name="address">
					<option value="北京">北京</option>	
					<option value="海口">海口</option>	
					<option value="哈尔滨">哈尔滨</option>	
				</select>
				</p>
				<p style="margin-left: 40%;">
				爱好：
				<input type="checkbox" value="sport" />运动
				<input type="checkbox" value="article" />艺术
				<input type="checkbox" value="science" />科学
				</p>
				<p style="margin-left: 30%;">
				<p style="float: left;margin-left: 40%;">个人描述:</p><textarea name="description" rows="6" cols="80" >这是一个多行输入框，输入您的个人描述</textarea>
				</p>
				<p>
				<input style="border-radius: 10px 10px; border: 1px solid;background-color:deepskyblue; width: 95%; height: 50px; text-align: center;" type="button" name="button" value="确认提交"/>
				</p>
			</div>
			<div style="background-color: white; color: black; width: 100%; height: 1%; text-align: center;">版权所有&copy;</div>
		</div>
		</div>
	</body>
</html>
